<template>
  <div id="app">
      <div class="loginCard">

      <!-- 新增头部区域 -->
      <header class="card-header">
          <img src="@/assets/wuye.png" alt="Logo" class="logo" />
          <h1 class="header-title">智慧物业</h1>
        </header>
     
      <el-form ref="employee" :model="employee" label-width="80px" class="loginForm">

          <el-form-item label="手机号" prop="phone">
              <el-input v-model="employee.phone"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
              <el-input v-model="employee.password"></el-input>
          </el-form-item>

          
    
          <el-form-item>
              <el-button type="primary" @click="regerted">立即注册</el-button>
              <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
      </el-form>
  </div>
  </div>
</template>
<script>

  export default {
      data() {

          return {

              employee: {},

          }
      },
      mounted() {
  
      },

      methods: {



          login() {
             
              this.$axios.get("/users/login", { params: {phone:this.employee.phone,
                  password:this.employee.password,
          
              } })
                  .then(resp => {
                      if (resp.data.code == 200) {

                          this.$message({
                              message: '登录成功',
                              type: 'success'
                          });
                          //跳转
                          this.$router.push('/main')
                      } else {
                          this.$message.error("登录失败")
                    
                      }
                  })
          },

          regerted() {
         
                  this.$router.push('/Regerted')

          }

      }
  }
</script>
<style>
/* 页面全局蓝色背景 */
body {
  /* background-image: url('@/assets/yy.png'); */
background-color: #4A90E2; 
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}


.loginCard {
position: relative;
width: calc(500px - 40px);
height: calc(500px - 40px);
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: -20px;
}

.card-header {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
text-align: center;
border-bottom: 1px solid #eee;
}

.logo {
width: 50px;
height: 50px;
margin-right: 10px;
object-fit: cover;
}

.header-title {
font-size: 24px;
font-weight: bold;
}




/* 保持表单内容居中 */
.el-form {
display: flex;
flex-direction: column;
justify-content: flex-start; /* 修改为从顶部开始对齐 */
height: 100%;
padding-top: 40px; /* 增加表单与卡片顶部的距离 */
}
/* 为表单项添加上边距 */
.el-form-item {
margin-top: 20px; /* 根据需要调整上边距大小 */
}
.el-form-item__label {
color: #333; /* 表单项标签颜色 */
}

.el-button--primary {
background-color: #409EFF; /* 登录按钮颜色 */
border-color: #409EFF;
color: #fff;
}

.el-button--primary:hover {
background-color: #66B1FF;
border-color: #66B1FF;
}
.el-button{
  margin-left: -90px;
}
</style>